<template>
  <div class="ms-wrap">
    <div class="ms-login">
      <div class="ms-title">学生登录</div>
      <el-form
        :model="param"
        :rules="rules"
        ref="login"
        label-width="0px"
        class="ms-content"
      >
        <el-form-item prop="sno">
          <el-input v-model="param.sno" placeholder="学号"> </el-input>
        </el-form-item>
        <el-form-item prop="name">
          <el-input v-model="param.name" placeholder="姓名"> </el-input>
        </el-form-item>
        <el-form-item prop="academy">
          <el-input v-model="param.academy" placeholder="学院"> </el-input>
        </el-form-item>
        <el-form-item prop="major">
          <el-input v-model="param.major" placeholder="专业"> </el-input>
        </el-form-item>
        <el-form-item prop="class">
          <el-input v-model="param.class" placeholder="班级"> </el-input>
        </el-form-item>
        <div class="ms-notice">
          登录即注册<br />点击开始测试前请阅读弹出的mbti测试须知
        </div>
        <div class="login-btn">
          <el-tooltip placement="top">
            <template #content>
              MBTI测试前须知<br />
              1、参加测试的人员请务必诚实、独立地回答问题，只有如此，才能得到有效的结果。
              <br />
              2、《性格分析报告》展示的是你的性格倾向，而不是你的知识、技能、经验。
              <br />
              3、MBTI提供的性格类型描述仅供测试者确定自己的性格类型之用，性格类型没有好坏，只有不同。每一种性格特征都有其价值和优点，也有缺点和需要注意的地方。
              <br />
              清楚地了解自己的性格优劣势，有利于更好地发挥自己的特长，而尽可能的在为人处事中避免自己性格中的劣势，更好地和他人相处，更好地作重要的决策。<br />
              4、本测试分为四部分，共93题；需时约18分钟。所有题目没有对错之分，请根据自己的实际情况选择。
              <br />
            </template>
            <el-button type="primary" round @click="submit">开始测试</el-button>
          </el-tooltip>
        </div>
        <div class="re-login-btn">
          <el-button type="primary" plain round @click="returnlogin"
            >返回管理员登录</el-button
          >
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import request from "../helper/request.js";
export default {
  data() {
    return {
      param: {
        sno: "",
        name: "",
        academy: "",
        major: "",
        class: "",
      },
      rules: {
        sno: [{ required: true, message: "请输入学号", trigger: "blur" }],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        academy: [{ required: true, message: "请输入学院", trigger: "blur" }],
        major: [{ required: true, message: "请输入专业", trigger: "blur" }],
        class: [{ required: true, message: "请输入班级", trigger: "blur" }],
      },
    };
  },
  methods: {
    async submit() {
      await this.$refs.login.validate((valid) => {
        if (valid) {
          request
            .post(
              "/loginStudent",
              {
                studentID: this.param.sno,
                studentName: this.param.name,
                college: this.param.academy,
                specialize: this.param.major,
                studentClass: this.param.class,
              },
              {
                headers: {
                  "Content-Type": "multipart/form-data",
                },
              }
            )
            .then((res) => {
              console.log(res);
              window.localStorage.setItem(
                "stuInfo",
                JSON.stringify({
                  studentID: this.param.sno,
                  studentName: this.param.name,
                  college: this.param.academy,
                  specialize: this.param.major,
                  studentClass: this.param.class,
                })
              );
              this.$message.success("输入成功");
              this.$router.push("/StudentHome/MbtiTest");
            });
        } else {
          console.log("false");
          alert("错误，请重新输入！");
        }
      });
    },
    returnlogin() {
      this.$router.push("/");
    },
  },
};
</script>

<style scoped>
.ms-wrap {
  height: 97.6vh;
  background: #9cd6fa;
}
.ms-title {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 25px;
  color: #23a3b7;
  border-bottom: 1px solid #23a3b7;
}
.ms-notice {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 16px;
  color: #23a3b7;
}

.ms-login {
  position: absolute;
  left: 48%;
  top: 32%;
  width: 400px;
  padding: 40px;
  margin: -190px 0 0 -175px;
  border-radius: 5px;
  background: #e0f1fc;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.ms-content {
  padding: 30px 30px;
}

.login-btn {
  text-align: center;
}

.login-btn button {
  width: 100%;
  height: 36px;
  margin-bottom: 10px;
}
.re-login-btn {
  text-align: center;
}

.re-login-btn button {
  width: 100%;
  height: 36px;
  margin-top: 20px;
}
</style>